<template>
	<view class="container">
		<view class="status-bar"></view>
		<view class="body">
			<textarea v-model="area" placeholder="请输入内容" class="content" />
			<view class="images">
				<view class="item" v-for="(item, index) in itemList" :key="index">
					<image :src="item" class="image"></image>
					<uni-icons type="trash" size="18" color="red" class="delete" @click="del"></uni-icons>
				</view>

				<view class="item upload-btn flex-row" @click="upload" v-if="itemList.length == 0">
					
					<uni-icons type="plusempty" size="30" color="#ccc" class="add"></uni-icons>
				</view>
			</view>
			
			<button v-on:click="btSubmit()" class="btSubmit">提交
			</button>
		</view>
	</view>
</template>

<script>

export default {
	components: {
		
	},
	data() {
		return {
			area: '',
			itemList: []
		}
	},
	onLoad() {
		
	},
	methods: {
		del() {
			this.itemList = []
		},
		/**
		 * yiyuan/userwenpingadd   问题详情评论接口
			win_id 问题ID
			area  内容
			urls: [] 问题的图片
		 */
		btSubmit() {
			if(!this.area) {
				uni.showToast({
					title: '请填写内容',
					duration: 2000
				});
				return 
			}
			let image = this.itemList.join(',')
			this.$emit('refulesh', {area: this.area, image})
			
		},
		upload() {
			let that = this;
			that.$util.uploadImageOne('upload/image', function(res){
				that.itemList.push(res.data.url)
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.container{
	height: 60vh;
	overflow: hidden;
}
.module{
	width: 80vw;
	height: 600rpx;
	padding: 30rpx;
	overflow-y: auto;
	margin: 25vh auto 0;
	background-color: #FFF;
	
	.item{
		height: 80rpx;
		justify-content: flex-start;
		
		.text{
			margin-left: 20rpx;
		}
	}
}
.btSubmit{white-space:normal;width:200upx;height:74upx;padding:0upx;clear:both;margin-top:16upx;margin-left:274upx;float:left;background-color:#0097fc;text-align:center;justify-content:center; border-radius:20upx; color:#ffffff;font-size:27upx; line-height:74upx;}
.body{
	padding: 30rpx;
	overflow-y: auto;
	height: calc(100vh - 88rpx - var(--status-bar-height));
	
	.protocol{
		align-items: flex-start;
		
		.text{
			color: #999;
			font-size: 28rpx;
			width: calc(100% - 60rpx);
		}
	}
	
	.items{
		padding: 20rpx 0;
		
		.item{
			height: 100rpx;
			border-bottom: 2rpx solid #F2F2F2;
			
			.label{
				color: #666;
				font-size: 30rpx;
				margin-left: 20rpx;
			}
			
			.value{
				color: #999;
				font-size: 28rpx;
			}
		}
	}
	
	.content{
		height: 200rpx;
		font-size: 28rpx;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		width: calc(100% - 60rpx);
		background-color: #F9F9F9;
	}
	
	.images{
		overflow: hidden;
		
		.item{
			float: left;
			margin: 20rpx 20rpx 0 0;
			width: calc((100vw - 100rpx) / 3);
			height: calc((100vw - 100rpx) / 3);
			position: relative;
			
			&:nth-child(3n){
				margin-right: 0;
			}
			
			&.upload-btn{
				cursor: pointer;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				border: 2rpx solid #ededed;
			}
			
			.image{
				width: 100%;
				height: 100%;
			}
			
			.delete{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
			}
		}
	}
}
.header{
	height: 88rpx;
	padding: 0 30rpx 0 20rpx;
	border-bottom: 2rpx solid #F2F2F2;
	
	.left,
	.right{
		width: 100rpx;
	}
	.center{
		text-align: center;
		width: calc(100% - 200rpx);
	}
	.right{
		text-align: right;
	}
}
</style>
